<template>
  <el-header style="width: 100%">
    <div class="left">
      <div class="title">大数据配置中心</div>
      <el-menu
        :default-active="getActive()"
        background-color="#409eff"
        active-text-color="#ffd04b"
        text-color="#fff"
        style="border: none"
        class="el-menu-demo"
        mode="horizontal"
        router
      >
      </el-menu>
    </div>
    <el-dropdown>
      <span class="el-dropdown-link">
        {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item>帮助</el-dropdown-item> -->
        <el-dropdown-item @click.stop.native="logout" style="color: red"
          >退出</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>
<script>
import { getRealName } from "@/assets/js/api";
export default {
  data() {
    return {
      userName: null,
    };
  },
  computed: {
    auth() {
      return this.$store.state.auth;
    },
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      getRealName()
        .then((res) => {
          this.userName = res.data.realName;
        })
        // .catch(
        //   this.$message({
        //     showClose: true,
        //     message: "获取用户信息失败",
        //     type: "error",
        //   })
        // );
    },
    // 菜单高亮判断
    getActive() {
      let action = "/" + this.$route.path.split("/")[1];
      if (action == "/conf-center") action += "/role";
      else action += "/system";
      return action;
    },
    changeAuth(data) {
      this.$store.commit("setAuth", data);
    },
    logout() {
      // window.location.href = "/data-conf-center-server/login?referUrl=" + window.location.href;
      window.location.href = "/data-conf-center-server/logout";
    },
  },
};
</script>
<style lang="scss" type="text/css" scoped>
.el-header {
  position: fixed;
  width: 100px;
  top: 0;
  left: 0;
  z-index: 10000;
  min-width: 1000px;
}
.el-header,
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #409eff;
  color: #fff;
  .title {
    width: 180px;
    margin-top: -2px;
    font-size: 20px;
    text-align: left;
  }
  .el-dropdown {
    color: #fff;
  }
  .el-menu-item {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
